import avatar from '@/assets/avatar.png';
import { delSingleComment, getAllComment } from '@/services/comments';
import type { CommentInfo } from '@/services/comments/typing';
import { convertTimeZone } from '@/utils/operateTime';
import type { ActionType } from '@ant-design/pro-components';
import { ProList } from '@ant-design/pro-components';
import { Avatar, Button, message, Popconfirm, Tag } from 'antd';
import { useRef } from 'react';

const Overview: React.FC = () => {
  const listRef = useRef<ActionType>(null);
  function deleteSingleComment(commentId: number) {
    delSingleComment(commentId).then((res) => {
      message.success(res.msg);
    });
    listRef.current?.reload();
  }

  return (
    <ProList<CommentInfo>
      search={{}}
      rowKey={(row) => row.comment_id}
      size="large"
      actionRef={listRef}
      request={async (params = {} as Record<string, any>) => {
        const {
          current = 1,
          pageSize = 10,
          comment_nickname,
          comment,
        } = params;
        const res = await getAllComment({
          page: current,
          pageSize,
          commentNickname: comment_nickname,
          comment,
        });
        return {
          data: res.data.list,
          total: res.data.total,
        };
      }}
      pagination={{
        pageSize: 10,
      }}
      metas={{
        title: {
          dataIndex: 'comment_nickname',
          title: '评论人',
        },
        avatar: {
          dataIndex: 'avatar',
          search: false,
          render: () => [<Avatar src={avatar} size={35} />],
        },
        subTitle: {
          dataIndex: 'labels',
          render: (_, row) => {
            return row.parent_id ? (
              <Tag color="geekblue">子评论</Tag>
            ) : (
              <Tag color="red">父评论</Tag>
            );
          },
          search: false,
        },
        description: {
          dataIndex: 'create_time',
          search: false,
          render: (_, row) => [<div>{convertTimeZone(row.create_time)}</div>],
        },
        content: {
          dataIndex: 'comment',
          title: '评论',
        },
        actions: {
          render: (_, row) => [
            <Popconfirm
              title={`确认删除该${row.parent_id ? '子' : '父'}评论吗？`}
              description={!row.parent_id && '删除父评论同时会删除其子评论'}
              onConfirm={() => deleteSingleComment(row.comment_id)}
              okText="Yes"
              cancelText="No"
            >
              <Button color="danger" variant="text">
                删除
              </Button>
            </Popconfirm>,
          ],
          search: false,
        },
      }}
    />
  );
};

export default Overview;
